<template>
  <div class="management-container">
    <u-navbar
      title="我的帖子"
      :autoBack="true"
      :fixed="false"
      bgColor="#fff"
    ></u-navbar>
    <!-- bgColor="#f2f3f7" -->

    <view class="item-container">
      <template v-for="(item, index) in list">
        <view class="item" @click="getRouter(item)">
          <view class="img-box">
            <image class="img" :src="item.img" mode="scaleToFill" />
          </view>
          <view class="title">{{ item.title }}</view>
          <view class="num-container">
            <view class="num">{{ item.num }}个</view>
            <view class="operation">去操作 ></view>
          </view>
        </view>
      </template>
    </view>
  </div>
</template>
<script>
import { request } from "@/utils/http.js";
export default {
  data() {
    return {
      list: [
        {
          title: "展示中",
          img: "../../static/my-img/accomplish.png",
          url: "/pages/my/postManagementDetail",
          num: 0,
          index: 0,
          key: "zsz",
          status: "1",
        },
        {
          title: "待审核",
          img: "../../static/my-img/await.png",
          url: "/pages/my/postManagementDetail",
          num: 0,
          index: 1,
          key: "dsh",
          status: "0",
        },
        {
          title: "未通过",
          img: "../../static/my-img/notPass.png",
          url: "/pages/my/postManagementDetail",
          num: 0,
          index: 2,
          key: "bohui",
          status: "9",
        },
        {
          title: "已下架",
          img: "../../static/my-img/xiajia.png",
          url: "/pages/my/postManagementDetail",
          num: 0,
          index: 3,
          status: "2",
          key: "xjz",
        },
        // {
        //   title: "被管理员下架",
        //   img: "../../static/my-img/accomplish.png",
        //   url: "/pages/my/postManagementDetail",
        //   num: 0,
        //   index: 4,
        // },
        // {
        //   title: "被管理员删除",
        //   img: "../../static/my-img/delete.png",
        //   url: "/pages/my/postManagementDetail",
        //   num: 0,
        //   index: 5,
        // },
      ],
    };
  },
  onLoad(options) {
    this.getList();
  },
  onShow() {
    this.getList();
  },
  methods: {
    getRouter(item) {
      const { url, index, status } = item;
      this.$u.route(url, { index, status });
    },
    getList() {
      request
        .post("/xiangmushe/getMyPostsStatusCount")
        .then(({ data }) => {
          this.list.forEach((item) => {
            console.log(data);
            if (data[item.key]) {
              item.num = data[item.key];
            } else {
              item.num = 0;
            }
          });
        })
        .catch((err) => {});
    },
  },
};
</script>
<style lang="scss" scoped>
pages {
  background-color: #f2f3f7;
}
.management-container {
  .item-container {
    padding: 80rpx 30rpx;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    justify-content: space-between;
    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 20rpx 0;
      box-sizing: border-box;
      width: 330rpx;
      height: 300rpx;
      text-align: center;
      background-color: #fff;
      border-radius: 10rpx;
      margin-bottom: 40rpx;

      .img {
        width: 50rpx;
        height: 50rpx;
      }

      .title {
        font-size: 26rpx;
        margin: 10rpx 0;
      }
      .num-container {
        width: 280rpx;
        padding: 20rpx 15rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        background-color: #f2f3f7;
        margin: 10rpx auto;
        border-radius: 10rpx;
        .num {
          font-size: 24rpx;
        }
        .operation {
          font-size: 24rpx;
          color: #329af6;
        }
      }
    }
  }
}
</style>
